<style lang="scss">
html,body {
background:#000;
overflow:hidden;
height:100%;
}
body {
position: relative;
}
</style>

<template lang="pug">
.body(@click="next")
    transition(enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" @after-leave="leave")
        media(:src="src[0]" v-show="!n" prefix="https://p.gu321.com/upad/") 
    transition(enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft" @after-leave="leave")
        media(:src="src[1]" v-show="n" prefix="https://p.gu321.com/upad/") 
</template>

<script lang="coffee">
_TIMER = undefined

是否竖屏 = ->
    !((window.orientation+初始旋转度数)%180) - 0

初始旋转度数 = 竖屏 = undefined

竖屏初始化 = ->
    初始旋转度数 = 0
    竖屏 = 是否竖屏()
    # 平板默认是横屏，但是orientation是0
    if (window.innerHeight < window.innerWidth)
        if 竖屏
            初始旋转度数 = 90
            竖屏 = 0
    else
        if not 竖屏
            竖屏 = 1
            初始旋转度数 = 90


竖屏初始化()

_src = (src)->
    pos = src.indexOf('/')
    dir = src.slice(0, pos)
    file = src.slice(pos+1)
    return "#{dir}/#{竖屏}/#{file}"

export default {
    data :->
        li = (await $.get '/api/li.txt').split('\n').filter(Boolean)
        {
            n:0
            now:1
            li
            src : [
                _src(li[0])
                _src(li[1])
            ]
        }

    methods:{
        timeout:(n)->
            _timer = (t)=>
                _TIMER = setTimeout(
                    @next
                    t*1000
                )
            video = $($(@$el).find('.media')[@n]).find('video')[0]
            if video
                video.addEventListener('error', @next)
                video.addEventListener('ended',@next)
                video.play().catch(
                    (err)=>
                        console.log err
                        console.trace err
                        @next()
                )
            else
                _timer 3
        leave:->
            @$set @src,!@n-0, _src(@li[@now])

        next:->
            clearTimeout(_TIMER)
            @n = !@n-0
            @now = (++@now)%@li.length
            @timeout()

    }
    
    components: {
        media : require('./media.vue').default
    }

    beforeDestroy:->
        $(window).unbind "orientationchange.upad"


    mounted: ->
        
        竖屏初始化()

        @timeout()
        document.addEventListener(
            "visibilitychange"
            =>
                if not document.hidden
                    @next()
        )
        $(window).bind(
            "orientationchange.upad"
            (event) =>
                _竖屏 = 是否竖屏() 
                if _竖屏 != 竖屏
                    竖屏 = _竖屏
                    for i,pos in @src
                        @$set @src,pos, i.replace("/#{(!竖屏)-0}/", "/#{竖屏}/")
                    @$nextTick @next
                # 根据event.orientation|screen.orientation.angle等于0|180、90|-90度来判断横竖屏
        )
}
</script>

